<template lang="pug">
  .container.homework__main
    .row(v-if="addwork")
      .col-sm-3
        h2.side__menu__title 课本
          .side__menu__switch.side__menu__switch_teacher.add(@click.stop="addBook")
            i.icon_switch_normal
            | 添加
        h3.side__menu__dt 高二课本 (第二学期)
        ul.side__menu__list
          li
            a(href="") 第11章   坐标平面有理数函数
            ul
              li
                a(href="") 二次函数
              li
                a(href="") 不等式方式
                ul
                  li
                    a(href="") 坐标平面有理数函数
      .col-sm-9

        .addwork-header
          .title 网络作业布置
          .btns
            a.btn.save 保存
            a.btn.view 预览
            a.btn.cancel 取消

        .addwork-intro
          .intro-header
            .header-left
              .title 作业辅导名称:
              input(type="input").show
            .header-right
              .title 所属章节:
              input(type="input").show              
          .intro-detail
            .title 作业需求:
            textarea.content 解析

        .addwork-content
          .header
            .title 题目
            .select-btns
              a.btn.net 题库题目
              a.btn.local(@click="openLocalTest") 本机题目
          .content
            .tutorship__teacher__item
              .tutorship__teacher__item__hd
                .item_index  1题
              .tutorship__teacher__item__bd
                h5 1.（2017北京试题）如果向北走6步记做+6，那么向北走8步记做？（）
                ol(type="A")
                  li +8
                  li +8
                  li +8
                  li +8
              .tutorship__teacher__item__ft
                .item_ft_actions
                  a.btn.btn-sm.btn-actions 答案
                  a.btn.btn-sm.btn-actions 解析
                  a.btn.btn-sm.btn-actions 移除
                  a.btn.btn-sm.btn-actions 修改
                .item_ft_count
                  span
                    span 答案
                    a A
                  span
                    span 分值
                    a 6
                .item-show-answer 解析解析解析解析解析解析解析解析解析解析
                  
            .tutorship__teacher__item
              .tutorship__teacher__item__hd
                .item_index  1题
              .tutorship__teacher__item__bd
                h5 1.（2017北京试题）如果向北走6步记做+6，那么向北走8步记做？（）
                ol(type="A")
                  li +8
                  li +8
                  li +8
                  li +8
              .tutorship__teacher__item__ft
                .item_ft_actions
                  a.btn.btn-sm.btn-actions 答案
                  a.btn.btn-sm.btn-actions 解析
                  a.btn.btn-sm.btn-actions 移除
                  a.btn.btn-sm.btn-actions 修改
                .item_ft_count
                  span
                    span 答案
                    a A
                  span
                    span 分值
                    a 6
          a.btn-next(@click="addworkNext") 下一步
    .row.nextMain(v-if="!addwork")
      .next-header
        .se-all-shape
        .se-all-text 全部班级
      .next-main
        .main-list
          table.homework__tb
            tr
              td 班级
              td 开始时间
              td 结束时间
              td 提交后看答案
              td 结束后看答案
            tr
              td 
                span.se-shape
                span 5班(34/34人)
              td
                span.time 2017.12.12 
              td
                span.time 2017.12.12
              td
                span.se-shape.se-center
              td
                span.se-shape.se-center
          .stu-list
            .stu-title 指定学生：
            .stu-detail(v-for=("item in studentNameList"))
              .span.se-shape
              .span.se-name {{item.name}}
          .hr
          table.homework__tb
            tr
              td 班级
              td 开始时间
              td 结束时间
              td 提交后看答案
              td 结束后看答案
            tr
              td 
                span.se-shape
                span 5班(34/34人)
              td
                span.time 2017.12.12 
              td
                span.time 2017.12.12
              td
                span.se-shape.se-center
              td
                span.se-shape.se-center           
      .next-btns
        a.btn.next-btn-confirm 确定
        a.btn.next-btn-cancel 取消
  
</template>
<style lang="scss">
.homework__main {
  .side__menu__title {
    .add {
      right: 50px;
    }
  }
  .side__menu__list {
    a {
     color: $teacherMainColor;
    }    
  }

  .addwork-header {
    height: 46px;
    line-height: 46px;
    background: #FAFAFA;
    padding-left: 24px;
    padding-right: 24px;
    .title {
      float: left;
      font-size: 12px;
      color:  #000000;
    }
    .btns {
      float: right;
      .btn {
        border: 1px solid #157EF2;
        border-radius: 6px;
        color: #157EF2;
        width: 60px;
        font-size: 12px;
        margin-left: 20px;
        cursor: pointer;        
      }
      .btn:hover {
        background: #157EF2;
        color: #fff;
      }
    }
  }

  .addwork-intro {
    font-size: 12px;
    padding: 24px;
    height: 220px;
    background: #fafafa;
    .intro-header {
      margin-bottom: 20px;
      .header-left {
        float: left;
        .title {
          float: left;
          height: 28px;
          line-height: 28px;          
        }
        .show {
          display: inline-block;
          width: 240px;
          height: 28px;
          border: 1px solid #157EF2;
          border-radius: 4px;
          margin-left: 10px;
          padding-left: 10px;        
        }
      }
      .header-right {
        .title {
          float: left;
          height: 28px;
          line-height: 28px;
          margin-left: 60px;          
        }
        .show {
          display: inline-block;
          width: 240px;
          height: 28px;
          border: 1px solid #157EF2;
          margin-left: 10px;         
          padding-left: 10px;        
          border-radius: 4px;             
        }
      }
    }
    .intro-detail {
      .title {
        float: left;
        height: 28px;
        line-height: 28px;
        margin-left: 24px; 
      }
      .content {
        display: inline-block;
        resize:none;
        margin-left: 10px;
        float: left;
        width: 88%;
        height: 138px;
        border-radius: 10px;
        background: #fff;
        padding: 10px;
        border: none;
      }
    }
  }

  .addwork-content {
    clear: both;
    .header {
      padding: 24px;
      margin-top: 20px;
      .title {
        float: left;
        font-size: 18px;
        color: #000;
      }
      .select-btns {
        float: right;
        .btn {
          border: 1px solid #167EF2;
          border-radius: 6px;
          width: 110px;
          color: #167EF2;
          font-size: 12px;
          margin-left: 30px; 
        }
        .btn:hover {
          color: #fff;
          background: #167EF2;
        }
      }
    }
    .content {
      clear: both;
      .tutorship__teacher__item{
        margin-top: 15px;
        padding: 14px 20px;
        border-radius: 10px;
        background: #fafafa;
      }
      .tutorship__teacher__item__hd {
        font-size: 12px;
        margin-top: 10px;
        margin-bottom: 20px;
        .item_index {
          font-weight: bold;
          color: #000000;
          display: inline-block;
        }
        .item_move {
          display: inline-block;
          float: right;
          .btn_move {
            border: 1px solid $teacherMainColor;
            border-radius: 6px;
            color: $teacherMainColor;  
            width: 66px;
            font-size: 12px;
            margin-left: 20px;
            cursor: pointer;           
          }
          .btn_move:hover {
            background: $teacherMainColor;
            color: #fff;
          }
        }
      }
      .tutorship__teacher__item__bd {
        border-top: 1px solid #ececec;
        border-bottom: 1px solid #ececec;
        padding: 12px 0 50px;
        font-size: 14px;
        h5 {
          font-size: 14px;
        }
        ol {
          @include clearfix();
          padding: 0;
          margin: 0;
          margin-top: 15px;
          li {
            float: left;
            width: 100px;
            list-style-position: inside;
          }
        }
      }
      .tutorship__teacher__item__ft {
        margin-top: 10px;
        .item_ft_actions {
          display: inline-block;
          cursor: pointer;
          .btn-actions {
            border: 1px solid $teacherMainColor;
            border-radius: 6px;
            color: $teacherMainColor;  
            width: 66px;
            font-size: 12px;
            margin-left: 20px;       
          }
          .btn-actions:hover {
            background: $teacherMainColor;
            color: #fff;        
          }
        }
        .item_ft_count {
          display: inline-block;
          float: right;
          color: #848484;
          font-size: 12px;
          span {
            padding-left: 10px;
            span {
              margin-left: 35px;
              display: inline-block;
            }
            a {
              display: inline-block;
              width: 50px;
              border: 1px solid #157EF2;
              border-radius: 4px;
              text-align: center;
              margin-left: 10px;
            }
          }
        }
        .item-show-answer {
          width: 90%;
          height: 100px;
          border-radius: 6px;
          margin: 20px auto;
          padding: 22px;
          background: #fff;
          font-size: 12px;
        }
      }      
    }
    .btn-next {
      display: block;
      width: 138px;
      height: 36px;
      line-height: 36px;
      border: 1px solid #167EF2;;
      margin: 0 auto;
      border-radius: 6px;
      text-align: center;
      margin-top: 38px;
      margin-bottom: 30px;
    }
    .btn-next:hover {
      background: $teacherMainColor;
      color: #fff;
      cursor: pointer;     
    }
    
  }

  // nextMain
  .nextMain {
    margin-left: 0;
    margin-right: 0;
    .next-header {
      margin-bottom: 10px;
      padding-left: 38px;
      width: 100%;
      height: 46px;
      line-height: 46px;
      background: #FAFAFA;
      border-radius: 10px;    
      .se-all-shape {
        width: 18px;
        height: 18px;
        margin-top: 14px;
        margin-left: 10px;
        vertical-align: middle;
        border-radius: 4px;
        border: 1px solid #157EF2;
        float: left;
        cursor: pointer;
      }
      .se-all-text {
        font-size: 14px;
        float: left;
        margin-left: 10px;
      }
    }
    .next-main {
      padding-left: 38px;
      width: 100%;
      background: #FAFAFA;
      border-radius: 10px;      
      .main-list {
        .hr {
          height: 10px;
          width: 100%;
          background: #fff;
        }
        .homework__tb {
          margin-bottom: 20px;
          clear: both;
          margin-top: 20px;
        }
        .homework__tb td {
          width: 23%;
          .se-shape {
            width: 18px;
            height: 18px;
            border: 1px solid #157EF2;
            border-radius: 4px;
            float: left;
            margin-right: 6px;
            vertical-align: middle;
            cursor: pointer;            
          }
          .se-center {
            margin-left: 26px;
          }
          .time {
            border: 1px solid #157EF2;
            width: 80px;
            height: 20px;
            display: inline-block;
            text-align: center;
            border-radius: 4px;
            color: #157EF2;            
          }
        }
        .homework__tb td:nth-child(1) {
          width: 25%;
        }
      }
      .stu-list {
        margin-top: 24px;
        font-size: 12px;
        height: 100px;
        overflow: auto;
        .stu-title {
          width: 6%;
          float: left;
          height: 100px;
        }
        .stu-detail {
          float: left;
          margin-right: 28px;
          margin-bottom: 20px;
          width: 70px;
          .se-shape {
            width: 18px;
            height: 18px;
            border: 1px solid #157EF2;
            border-radius: 4px;
            float: left;
            margin-right: 6px;
            vertical-align: middle;
            cursor: pointer;
          }
        }
      }
    }
    .next-btns {
      text-align: center;
      margin: 40px auto;
      .btn {
        display: inline-block;
        width: 120px;
        height: 36px;
        border: 1px solid #157EF2;
        color: #157EF2;
        cursor: pointer;
        margin-left: 100px;
      }
      .btn:hover {
        background-color: #157EF2;
        color: #fff;
      }
    }
  }

}

</style>
<script>
import api from 'api/tutorship'
export default {
  data () {
    return {
      list: [],
      addwork: true,
      studentNameList: [{
        name: '车子昂',
        id: 1
      }, {
        name: '车子昂',
        id: 2
      }, {
        name: '车子昂',
        id: 3
      }, {
        name: '车子昂',
        id: 4
      }, {
        name: '车子昂',
        id: 5
      }, {
        name: '车子昂',
        id: 6
      }, {
        name: '车子昂',
        id: 7
      }, {
        name: '车子昂',
        id: 8
      }, {
        name: '车子昂',
        id: 9
      }, {
        name: '车子昂',
        id: 10
      }, {
        name: '车子昂',
        id: 11
      }, {
        name: '车子昂',
        id: 12
      }]
    }
  },
  mounted () {
    api.getList('2', {
      studentid: '120176400199057431',
      from: 0,
      size: 10
    }).then((Response) => {
      const data = Response.data
      this.list = data.data.list
    })
  },
  methods: {
    submit () {
      this.$router.push('/student/homework/score')
    },
    addworkNext () {
      this.addwork = false
    },
    openLocalTest () {
      console.log('打开本地题库...')
      this.$store.commit('showLocalTests', true)
    }
  }
}
</script>

